import router, { asyncRoutes } from './router/index.js'
import store from './store/index.js'

// 路由前置守卫,每次跳转页面都要先经过这里
router.beforeEach(async(to, from, next) => {
  // to,包含要去页面信息
  // from,包含从哪个页面来的信息
  // next方法,控制页面是否能访问
  // next()-允许方法
  // next('路径')-重定向
  if (['/404', '/login'].includes(to.path)) return next()
  if (store.state.user.token) {
    if (!store.state.user.userInfo.userId) {
      // 菜单权限实现-方式1-不用vuex的模块
      // 目的,让你了解主要实现步骤,并且把步骤放在一起,方便理解
      /*
      // 2.发请求获取用户信息
      await store.dispatch('user/getUserInfo')
      // 3.获取vuex当中用户信息的权限数据
      const menus = store.state.user.userInfo.roles.menus
      // 4.通过菜单标识过滤动态路由
      const filterRoutes = asyncRoutes.filter(t => menus.includes(t.children[0].name))
      console.log(filterRoutes)
      // 5.通过路由的addRoutes添加过滤路由到路由当中
      router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
      // 6.添加过滤路由到路由原始配置当中
      router.options.routes.push(...filterRoutes)
      // 7.解决页面刷新404的问题
      // 原因: (1)addRoutes添加路由配置不是立即生效,需要下一次跳转才生效
      //   (2)静态路由当中path为*的路由配置影响,把整一个配置放到最后面
      return next(to.path)
      // 8.部分菜单没有过滤出来
      */
      // 菜单权限实现-方式2-用vuex的模块
      // 4.发请求获取用户信息,并且得到菜单标识
      const { roles: { menus }} = await store.dispatch('user/getUserInfo')
      // 5.调用vuex当中action过滤路由
      const filterRoutes = await store.dispatch('permission/filterRouter', menus)
      // 6.通过路由的addRoutes添加过滤路由到路由当中
      router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
      // 8.解决页面刷新404的问题
      // 原因: (1)addRoutes添加路由配置不是立即生效,需要下一次跳转才生效
      //   (2)静态路由当中path为*的路由配置影响,把整一个配置放到最后面
      return next(to.path)
    }
    next()
  } else {
    next('/login')
  }

  // next()
})
// 路由后置守卫,每次跳转页面完成之后经过这里
router.afterEach((to, from) => {

})
